<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

	<div class="wrap_lnb_search">
		<div class="lnb_group_button">
	    	<table>
	    		<tr>
	    			<td><a id="btn_lnb_name" href="#" class="easyui-linkbutton btn_lnb" data-options="toggle:true,group:'g1',plain:true,selected:true">명칭</a></td>
	    			<td><a id="btn_lnb_content" href="#" class="easyui-linkbutton btn_lnb" data-options="toggle:true,group:'g1',plain:true">내용</a></td>
	    			<td><a id="btn_lnb_code" href="#" class="easyui-linkbutton btn_lnb" data-options="toggle:true,group:'g1',plain:true">코드</a></td>
	    			<td><a id="btn_lnb_index" href="#" class="easyui-linkbutton btn_lnb" data-options="toggle:true,group:'g1',plain:true">색인</a></td>
	    		</tr>
	    	</table>
	    </div>
		<div class="lnb_search" id="item_search">    
		    <table>    
		    	<colgroup>
		    		<col width="60px">
		    		<col width="*">
		    	</colgroup>
		    	<tr>
		    		<td>
				    	<select>
				    		<option>질병</option>
				    		<option>직업</option>
				    	</select>
		    		</td>
		    		<td class="formSearch">
		    			<input type="text">
		    			<a class="btn_search"></a>
		    		</td>
		    	</tr>
		    </table>
	    </div>
	    <div id="item_index" style="display:none">
			<div class="lnb_search middle">
		    	<select>
		    		<option>질병</option>
		    		<option>직업</option>
		    	</select>
		    </div>
		    <div class="lnb_group_button index">
		    	<table>
		    		<tr>
		    			<td><a href="javascript:void(0)" class="easyui-linkbutton btn_lndex" data-options="toggle:true,group:'g2',plain:true">ㄱ</a></td>
		    			<td><a href="javascript:void(0)" class="easyui-linkbutton btn_lndex" data-options="toggle:true,group:'g2',plain:true">ㄴ</a></td>
		    			<td><a href="javascript:void(0)" class="easyui-linkbutton btn_lndex" data-options="toggle:true,group:'g2',plain:true">ㄷ</a></td>
		    			<td><a href="javascript:void(0)" class="easyui-linkbutton btn_lndex" data-options="toggle:true,group:'g2',plain:true">ㄹ</a></td>
		    			<td><a href="javascript:void(0)" class="easyui-linkbutton btn_lndex" data-options="toggle:true,group:'g2',plain:true">ㅁ</a></td>
		    		</tr>
		    		<tr>
		    			<td><a href="javascript:void(0)" class="easyui-linkbutton btn_lndex" data-options="toggle:true,group:'g2',plain:true">ㅂ</a></td>
		    			<td><a href="javascript:void(0)" class="easyui-linkbutton btn_lndex" data-options="toggle:true,group:'g2',plain:true">ㅅ</a></td>
		    			<td><a href="javascript:void(0)" class="easyui-linkbutton btn_lndex" data-options="toggle:true,group:'g2',plain:true">ㅇ</a></td>
		    			<td><a href="javascript:void(0)" class="easyui-linkbutton btn_lndex" data-options="toggle:true,group:'g2',plain:true">ㅈ</a></td>
		    			<td><a href="javascript:void(0)" class="easyui-linkbutton btn_lndex" data-options="toggle:true,group:'g2',plain:true">ㅊ</a></td>
		    		</tr>
		    		<tr>
		    			<td><a href="javascript:void(0)" class="easyui-linkbutton btn_lndex" data-options="toggle:true,group:'g2',plain:true">ㅋ</a></td>
		    			<td><a href="javascript:void(0)" class="easyui-linkbutton btn_lndex" data-options="toggle:true,group:'g2',plain:true">ㅌ</a></td>
		    			<td><a href="javascript:void(0)" class="easyui-linkbutton btn_lndex" data-options="toggle:true,group:'g2',plain:true">ㅍ</a></td>
		    			<td><a href="javascript:void(0)" class="easyui-linkbutton btn_lndex" data-options="toggle:true,group:'g2',plain:true">ㅎ</a></td>
		    			<td><a href="javascript:void(0)" class="easyui-linkbutton btn_lndex" data-options="toggle:true,group:'g2',plain:true">A-Z</a></td>
		    		</tr>
		    	</table>
		    </div>
	    </div>
	</div>
    
    <div class="lnb_list_tree">
    	<ul class="easyui-tree" data-options="url:'/html/dic/dic_tree_data.jsp',animate:true,lines:true,nowrap:false,dnd:true"></ul>
    </div>    
    
	<div class="easyui-panel tree-node-selected lnb_btn_bar">
		<a href="#" class="easyui-linkbutton" data-options="toggle:true">항목위치변경</a>
		<a href="#" class="easyui-linkbutton" onclick="$('#add_item').dialog('open')">항목추가</a>
    </div>
    
    <div id="add_item">
    	<div class="easyui-panel panel-body info">
    		추가할 항목의 제목을 입력하세요.
    	</div>
    	<div class="wrap_tbl_inner dialog">
    		<table class="tbl_inner">
    			<col width="45px">
    			<col>
    			<tr>
    				<th>항목명</th>
    				<td class="formText" style="background:red"><input type="text"></td>
    			</tr>
    		</table>
    	</div>
    </div>
<script type="text/javascript">
$(function(){
 	$('#btn_lnb_name').removeClass('btn_lnb');
	$(".lnb_group_button a.easyui-linkbutton").click(function(event){
		var current_link = $(this);
		$(this).removeClass('btn_lnb'); 
		$('.lnb_group_button a.easyui-linkbutton').not(current_link).addClass('btn_lnb'); 
	});
	
	var current_btn = $('#btn_lnb_index');
	$(current_btn).click(function(){
		$('.easyui-accordion').find('.lnb.search_04').removeClass('search_04').addClass('search_05'); 
		$('#item_index').css('display','block');
		$('#item_search').css('display','none');
	});
	$('.easyui-linkbutton.btn_lnb').not(current_btn).click(function(){
		$('.easyui-accordion').find('.lnb.search_05').removeClass('search_05').addClass('search_04'); 
		$('#item_index').css('display','none');
		$('#item_search').css('display','block');
	});
});

//항목추가
$('#add_item').dialog({
    title: '신규항목 등록',
    iconCls:'icon-popup',
    width: 320,
    height: 175,
    closed: true,
    cache: false,
    modal: true,
    buttons: [{
        text:'저장',
        iconCls:'icon-ok',
        handler:function(){
            alert('신규항목을 저장하시겠습니까?');
        }
    },{
        text:'닫기',
        iconCls:'icon-cancel',
        handler:function(){
            $('#add_item').dialog('close');
        }
    }]
});
</script>

<!--[if lte IE 6]>
<script type="text/javascript"> 
$(document).ready(function() {		
	var current_btn = $('#btn_lnb_index');
	$(current_btn).click(function(){
		$('.lnb_list_tree').attr('id','lnb_list_index'); 
		var height = $('.lnb_list_tree').height()-87;
		$('#lnb_list_index').css('height', height); 
	});
	$('.easyui-linkbutton.btn_lnb').not(current_btn).click(function(){
		$('.lnb_list_tree').attr('id','').css('height', '100%');
	});
 });
</script>
<![endif]-->